<template>
    <!-- 添加或修改对话框 -->
    <lam-dialog :title="title" :visible.sync="visible" width="700px" append-to-body @close="cancel">
      <div>
        <!-- 查询区域 -->
        <el-form :model="queryParams" :ref="queryFormRef" inline v-show="showSearch" label-width="auto" @keyup.enter.native="handleQuery">
          <el-form-item label="关键字" prop="keywords">
            <el-input v-model="queryParams.keywords" placeholder="请输入关键字" clearable />
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询区域-END -->

        <selected-info :count="selectedRows.length" :onClearSelected="onClearSelected" />
        <el-table :ref="dataTableRef" v-loading="loading" :data="dataList" stripe border @selection-change="onSelectChange"
              :default-sort = "defaultSort" @sort-change="onSortChange" :row-key="rowKey" >
          <el-table-column type="selection" width="55" align="center" fixed="left"/>
          <el-table-column label="登录账号" align="center" prop="username"  width="150" sortable="custom"/>
          <el-table-column label="真实姓名" align="center" prop="realname"  width="120" />
          <el-table-column label="昵称" align="center" prop="nickName"  width="150" />
          <el-table-column label="性别" align="center" prop="sexDictText" width="80"/>
          <el-table-column label="用户类型" align="center" prop="userTypeDictText" width="100"/>
        </el-table>
        <pagination v-show="!loading" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" layout="total, sizes, prev, pager, next"/>

      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleOk" :loading="loading">确 定</el-button>
        <el-button @click="cancel">关  闭</el-button>
      </div>
  </lam-dialog>
</template>

<script>
import { IndexListMixin } from '@/components/mixins/IndexListMixin';

export default {
  name: "User",
  mixins:[IndexListMixin],
  data() {
    return {
      title: '',
      visible: false,

      // 查询参数
      queryParams: {
        usernameKey: null,
        realnameKey: null,
        pageNum: 1,
        pageSize: 10
      },
      url: {
      	list: '/sys/user/toSelectList',
      }
    };
  },
  created() {
  },
  mounted(){
  },
  methods: {
    getList() {
      this.loadData(this.url.list);
    },

    openD(op){
      op = Object.assign({title: '选择用户', queryData:{}}, op);
      Object.assign(this.queryParams, op.queryData);
      this.title = op.title;
      this.getList();
      this.visible = true;
    },

    handleOk() {
      this.$emit("ok", this.selectedRowKeys, this.selectedRows);
      this.cancel()
    },

    cancel() {
      this.selectedRowKeys=[];
      this.selectedRows=[];
      this.visible = false;
    },


  }
};
</script>
